<template>
  <div>
    <el-card>
      <div class="consumptiontop">
        <el-input
          v-model="searchuser"
          class="seachuser"
          placeholder="请输入你要搜索的用户"
          :prefix-icon="Search"
        />
        <el-button type="primary" @click="searchconsumption">搜索</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="id" />
          <el-table-column prop="typeway" label="应用类型" />
          <el-table-column label="金额">
            <template v-slot="scope">
              {{ scope.row.typemoney }}{{ scope.row.money }}
            </template>
          </el-table-column>
          <el-table-column prop="shengyu" label="账户金额"></el-table-column>
          <el-table-column prop="start" label="状态" />
          <el-table-column label="时间">
            <template v-slot="scope">
              {{ moment(scope.row.createmoney).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import moment from "moment";
const searchuser = ref("");
const tableData = ref([]);
onMounted(() => {});
const searchconsumption = () => {
  axios
    .get(
      `http://127.0.0.1:3000/consumption/consumptionuser/${searchuser.value}`
    )
    .then((res) => {
      if (res.data.data.length == 0) {
        tableData.value = [];
        ElMessage.error("用户名不存在,请重新输入");
      } else {
        tableData.value = res.data.data;
        tableData.value = res.data.data[0].consumptionall;
        tableData.value.sort((a, b) => {
          return a.createmoney > b.createmoney ? -1 : 1;
        });
        console.log(tableData.value);
        ElMessage({
          message: "获取成功",
          type: "success",
        });
      }
    });
};
</script>

<style  scoped>
.consumption {
  display: flex;
}
.seachuser {
  width: 400px;
  margin-right: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>